<template>

    <el-row  type="flex" justify="space-between" align="middle" style="height: 40px; width: 100%">
            <el-col>
              <!-- 左侧内容 -->
              <span>{{ treeNode.name }}</span>
            </el-col>
            <el-col :span="4">
              <el-row type="flex" justify="end">
                <el-col>{{ treeNode.manager }}</el-col>
                <el-col>
                  <!-- 放置下拉菜单 -->
                  <el-dropdown  @command="handleCommand">
                    <!-- 内容 -->
                    <span>操作
                      <i class="el-icon-arrow-down" />
                    </span>
                    <!-- 具名插槽 -->
                    <el-dropdown-menu slot="dropdown">
                      <!-- 下拉选项 -->
                      <el-dropdown-item command="add"  :disabled="!checkPermission('')">添加子部门</el-dropdown-item>
                      <el-dropdown-item command="edit" v-if="!isRoot">编辑部门</el-dropdown-item>
                      <el-dropdown-item command="del" v-if="!isRoot">删除部门</el-dropdown-item>

                    </el-dropdown-menu>
                  </el-dropdown>
                </el-col>
              </el-row>

            <!-- 右侧内容 -->
            </el-col>
          </el-row>
</template>

<script>
import {delDepartments} from '@/api/departments'
export default {
    name:'TreeTools',
props:{
    treeNode:{
        type:Object,
        required:true    
    },
    isRoot:{
        type:Boolean,
        default:false
    }
},
methods: {
    // 下拉菜单的回调函数
    handleCommand(type){
// alert(type)
if (type==='add') {
    this.$emit('addDepts', this.treeNode) // 为何传出treeNode 因为是添加子部门 需要当前部门的数据
} else if(type==='edit') {
    // 编辑部门
    this.$emit('editDepts', this.treeNode)
}else{
    // 删除部门 
    this.$confirm('确定删除吗？').then(()=>{
        return delDepartments(this.treeNode.id)
    }).then(()=>{
        // 调用接口只是删除后端数据 ，所以要通知前端数据更新父组件
        this.$emit('delDepts')
        this.$message.success('删除成功')
    })

}
    }
},
}
</script>

<style>

</style>